/**
 * @desc 赛事列表-后勤管理，新增酒店弹框
 * @author yd_zhaorongjun
 */
<template>
  <el-dialog
    class="gl_dialog_TitleLine gl_dl_footer"
    width="1200px"
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <div v-if="dialogVisible">
      <el-table v-loading="loading" :data="tableData" class="gl_table_noBorder" size="mini" style="width: 100%;" height="500px" @selection-change="selection">
        <el-table-column type="selection" label-class-name="selection" width="40" />
        <el-table-column label="房型图片" align="center" width="70">
          <template slot-scope="{row}">
            <img class="hotelPhoto" :src="getStaticFileUrl(row.imagePath)" alt="" @error="errorPhoto" @mouseenter="showImg(...arguments, row.imagePath)" @mouseleave="hideImg(row.imagePath)">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="房型名称" min-width="110" />
        <el-table-column
          label="床型"
          width="90"
        >
          <template slot-scope="{row}">
            {{ row.bedType.name || '--' }}
          </template>
        </el-table-column>
        <el-table-column
          label="早餐"
          width="90"
        >
          <template slot-scope="{row}">
            {{ row.breakfastType.name || '--' }}
          </template>
        </el-table-column>
        <el-table-column
          label="入住人数"
          width="70"
        >
          <template slot-scope="{row}">
            {{ row.personCount ? row.personCount + '人' : '--' }}
          </template>
        </el-table-column>
        <el-table-column
          label="建筑面积"
          width="80"
        >
          <template slot-scope="{row}">
            {{ row.area ? row.area + '平方米' : '--' }}
          </template>
        </el-table-column>
        <el-table-column
          label="窗户"
          width="70"
          align="center"
        >
          <template slot-scope="{row}">
            <span v-if="row.hasWindow == null">--</span>
            <span v-else>{{ row.hasWindow ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格" align="center" width="130">
          <template slot-scope="{row}">
            <div class="gl_input_number">
              ￥
              <el-input-number v-model="row.price" :controls="false" :precision="2" placeholder="请输入" size="mini" controls-position="right" :min="0" style="width: 55%;padding-left:5px;padding-right:5px" /> /每晚
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="房间总数" align="center" width="100">
          <template slot-scope="{row}">
            {{ row.count || '--' }}
            <div class="gl_input_number">
              <el-input-number v-model="row.count" :controls="false" :precision="0" placeholder="请输入" size="mini" controls-position="right" :min="1" style="width: 80%;padding-left:5px;padding-right:5px" />间
            </div>
          </template>
        </el-table-column> -->
        <el-table-column label="是否允许加床" align="center" width="120">
          <template slot-scope="{row}">
            <el-select v-model="row.hasExtraBed" placeholder="请选择" style="width:85%" size="mini">
              <el-option :value="false" label="否" />
              <el-option :value="true" label="是" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="加床价格" align="center" width="150">
          <template slot-scope="{row}">
            <div class="gl_input_number">
              ￥
              <el-input-number v-model="row.extraBedPrice" :disabled="!row.hasExtraBed" :controls="false" :precision="2" placeholder="请输入" size="mini" controls-position="right" :min="0" style="width: 55%;padding-left:5px;padding-right:5px" /> /每晚
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column fixed="right" :label="$t('table.actions')" width="200">
          <template>
            <div class="actions_div">
              <el-button size="mini" type="text" @click="addRomemanage('edit')">库存管理</el-button>
              <el-button size="mini" type="text" @click="addRomemanage('check')">查看</el-button>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <img v-if="isShowImg && getStaticFileUrl(bigImg)" class="roomBigPhoto" :style="position" :src="getStaticFileUrl(bigImg)" alt="" @error="errorPhoto">
      <!-- <el-row class="gl_pt_20" style="text-align: right;">
        <el-pagination
          :current-page="Api_GET_UnlaunchedRoomListQO.Page"
          :page-size="Api_GET_UnlaunchedRoomListQO.MaxResultCount"
          :total="totalPage"
          layout="total,sizes,prev,pager,next,jumper"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
          @current-change="pageIndexChange"
        />
      </el-row> -->
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      <!-- 保存按钮 -->
      <el-button type="primary" :disabled="SelectionList.length <= 0" :loading="submitLoading" size="mini" @click="saveNew()">确 定</el-button>
    </div>
    <addRomemanage ref="romemanage"/>
  </el-dialog>
</template>
<script>
import defaultHotelImg from '@/assets/images/face_default.png';
import { SiSTKWEventsManagementLaunchedRoomCreateDto, Api_GET_EventsManagementRoomUnlaunchedRoomListQO } from '@/lib/form/game/swaggerForm';
import {
  api_GET_EventsManagementRoomUnlaunchedRoomList
} from '@/extend/api/gameswaggerApi/app';
import addRomemanage from './addRomemanage'
export default {
  props: {
    // 字典信息
    dict: {
      type: Object,
      default () {
        return {};
      }
    },
    dictAll: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  components: {
    addRomemanage
  },
  data() {
    return {
      defaultHotelImg: defaultHotelImg,
      loading: false,
      currentPage: 1,
      totalPage: 0,
      title: '',
      Api_GET_UnlaunchedRoomListQO: new Api_GET_EventsManagementRoomUnlaunchedRoomListQO(),
      Api_POST_LaunchedRoomCreateDto: new SiSTKWEventsManagementLaunchedRoomCreateDto(),
      tableData: [],
      submitLoading: false,
      bookingTime: {},
      isShowImg: false,
      rowId: '', // 关联上架酒店Id
      position: {
        left: 0,
        top: 0
      },
      timeOut: '',
      dialogVisible: false,
      SelectionList: [], // 选中的数据
      weightingType: '' // 控制显示是团体还是个人
    };
  },
  created() {
    this.gameId = this.$route.params.id;
  },
  methods: {
    open(row) {
      console.log(row);
      this.title = '选择房型';
      this.SelectionList = [];
      this.tableData = [];
      this.rowId = row.id;
      this.Api_GET_UnlaunchedRoomListQO = new Api_GET_EventsManagementRoomUnlaunchedRoomListQO();
      this.Api_POST_LaunchedRoomCreateDto = new SiSTKWEventsManagementLaunchedRoomCreateDto();
      this.dialogVisible = true;
      this.refreshList();
    },
    // 刷新列表
    refreshList(page) {
      this.loading = true;

      this.Api_GET_UnlaunchedRoomListQO.LaunchedHotelId = this.rowId;
      this.Api_GET_UnlaunchedRoomListQO.IncludeBedType = true;
      this.Api_GET_UnlaunchedRoomListQO.IncludeBreakfastType = true;

      api_GET_EventsManagementRoomUnlaunchedRoomList(this.Api_GET_UnlaunchedRoomListQO).then(res => {
        this.tableData = res || [];
        for (let i = 0; i < this.tableData.length; i++) {
          const item = this.tableData[i];
          this.$set(item, 'hasExtraBed', false);
          item.price = undefined;
          // item.count = undefined;
          item.extraBedPrice = undefined;
          // item.hasExtraBed = false;
        }
        console.log(this.tableData);
        this.loading = false;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
        this.loading = false;
      });
    },
    // 重置搜索表单
    refreshSearchForm() {
      this.Api_GET_UnlaunchedRoomListQO = new Api_GET_EventsManagementRoomUnlaunchedRoomListQO();
      this.refreshList();
    },
    // 选中的数据
    selection(val) {
      this.SelectionList = val;
    },
    // 新增
    saveNew() {
      console.log(this.SelectionList);
      const isRmb = this.SelectionList.some((item) => {
        return item.price === undefined;
      });
      // const isRooms = this.SelectionList.some((item) => {
      //   return item.count === undefined;
      // });
      const isExtraBedPrice = this.SelectionList.some((item) => {
        return item.extraBedPrice === undefined && item.hasExtraBed;
      });
      // 价格 || 房间数量   都是true 的话代表有空的，提示不能为空
      if (isRmb || isExtraBedPrice) {
        this.$message({ type: 'error', message: '已勾选的输入框不能为空' });
        return;
      }
      const returnData = [];
      for (let i = 0; i < this.SelectionList.length; i++) {
        const item = this.SelectionList[i];
        const _data = {
          roomId: item.id,
          launchedHotelId: this.rowId,
          price: item.price ? Math.floor(item.price * 1000) / 10 : null,
          // count: item.count ? item.count : null,
          hasExtraBed: item.hasExtraBed,
          extraBedPrice: Math.floor(item.extraBedPrice * 1000) / 10 || item.extraBedPrice === 0 ? Math.floor(item.extraBedPrice * 1000) / 10 : null
        };
        returnData.push(_data);
      }
      console.log(returnData);
      this.submitLoading = true;
      this.$emit('insert', returnData);
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    showImg(event, img) {
      const _this = this;
      _this.bigImg = img;
      const _img = event.target; // 这里就是获取到的dom元素
      const _position = _img.getBoundingClientRect();
      this.timeOut = setTimeout(() => {
        _this.isShowImg = true;
        this.$set(this.position, 'left', _position.left + 60 + 'px');
        this.$set(this.position, 'top', _position.top + 'px');
      }, 300);
    },
    hideImg(img) {
      const _this = this;
      clearTimeout(this.timeOut);
      _this.isShowImg = false;
    },
    addRomemanage(row) {
      this.$refs.romemanage.bookingTime = this.bookingTime;
      this.$refs.romemanage.open(row);
    },
    showRoomImg(event, img) {
      const _this = this;
      _this.bigImg = img;
      const _img = event.target; // 这里就是获取到的dom元素
      const _position = _img.getBoundingClientRect();
      console.log(_position);
      this.timeOut = setTimeout(() => {
        _this.isShowRoomImg = true;
        _this.$set(_this.position, 'left', _position.left + 60 + 'px');
        _this.$set(_this.position, 'top', _position.top + 'px');
      }, 300);
      console.log(this.position);
    },
    hideRoomImg() {
      const _this = this;
      clearTimeout(this.timeOut);
      _this.isShowRoomImg = false;
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_UnlaunchedRoomListQO.MaxResultCount = MaxResultCount;
      this.refreshList();
    },
    pageIndexChange(currentPage) {
      this.refreshList(currentPage);
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultHotelImg;
    }
  }
};
</script>
<style lang="scss" scoped>
  .hotelPhoto, .roomPhoto{
    width: 48px;
    height: 36px;
    vertical-align: middle;
  }
  .hotelBigPhoto{
    width: 310px;
    height: 280px;
    position: absolute;
    z-index: 10;
    left: 70px;
  }
  .roomBigPhoto{
    width: 310px;
    height: 280px;
    position: fixed;
    z-index: 10;
  }
  .icon_color {
    color: #1682e6;
  }
  .el-input-number.is-without-controls .el-input__inner{
    padding-left: 5px;
    padding-right: 5px;
  }
</style>

